<ol class="breadcrumb">
    <li><a href="#">奇妙云箱</a></li>
    <li><a href="/box/list">箱子管理</a></li>
    <li>中奖率设置</li>
</ol>
<div class="panel panel-default">
    <div class="panel-heading">
        <span class="glyphicon glyphicon-pencil"></span>
        <span class="panel-title">请填写中奖率信息</span>
    </div>
    <div class="panel-body">

        <div class="alert alert-warning" role="alert">机率为 0 时不启用此设置，中奖时段也无效</div>
        <form class="form-horizontal" role="form">

            <div class="form-group">
                <label for="probability1" class="col-xs-2 control-label">一般时段机率：</label>

                <div class="col-xs-9">
                    <input type="number" class="form-control" id="probability1" value="<%=box.probability1%>"
                           placeholder="请输入一般时段的中奖几率">
                </div>

            </div>

            <div class="form-group">
                <label for="probability" class="col-xs-2 control-label">特殊时段机率：</label>

                <div class="col-xs-9">
                    <input type="number" class="form-control" id="probability" value="<%=box.probability%>"
                           placeholder="请输入特殊时段的中奖几率">
                </div>

            </div>

            <div class="form-group">
                <label for="times1" class="col-xs-2 control-label">每天执行：</label>

                <div class="col-xs-9">
                    <div id="datetimepicker3" class="input-append input-group">
                        <input data-format="hh:mm:ss" type="text" id="times1" class="form-control"
                               placeholder="请设置每天执行的时间"/>
                        <span class="input-group-addon add-on">
                            <i class=" icon-time icon-large" data-time-icon="icon-time"
                               data-date-icon="icon-calendar"></i>
                        </span>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <label for="duration1" class="col-xs-2 control-label">持续时间（每天执行）：</label>

                <div class="col-xs-9">
                    <div class=" input-group">
                        <input type="number" class="form-control" id="duration1"
                               placeholder="请设置持续时间（单位：分钟）">
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" id="addLoop">添加</button>
                        </span>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <label for="times1" class="col-xs-2 control-label">某天执行：</label>

                <div class="col-xs-9">
                    <div id="datetimepicker2" class="input-append date input-group">
                        <input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="times2" class="form-control"
                               placeholder="请设置特定的日期">
                        <span class="input-group-addon add-on">
                             <i class="icon-calendar icon-large" data-time-icon="icon-time"
                                data-date-icon="icon-calendar"></i>
                        </span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="duration2" class="col-xs-2 control-label">持续时间（某天执行）：</label>

                <div class="col-xs-9">
                    <div class="input-group">

                        <input type="number" class="form-control" id="duration2"
                               placeholder="请设置持续时间（单位：分钟）">

                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default" id="addOnce">添加</button>
                        </div>
                    </div>
                </div>

            </div>


            <div class="form-group">
                <label for="duration2" class="col-xs-2 control-label">特殊时段：</label>

                <div class="col-xs-9">
                    <div class="alert alert-success" role="alert" id="timesGroup">
                        <span>请通过添加按钮添加...</span>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <div class="col-xs-9 col-xs-offset-2">
                    <button type="button" class="btn btn-success col-xs-2" id="submit">设置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">

    var looptimes = new Array();//循环时间
    var oncetimes = new Array();//执行一次的时间
    var count = 1;
    var loopcount = 0;//记录数组下标
    var oncecount = 0;
    var boxid = '<%=boxid%>';

    $(function () {

        $('#datetimepicker3').datetimepicker({
            maskInput: true,
            pickDate: false
        });
        var picker = $('#datetimepicker3').data('datetimepicker');

        $('#datetimepicker2').datetimepicker({
            maskInput: true,
            format: 'yyyy/MM/dd hh:mm:ss',
            language: 'zh-CN'
        });


        var picker1 = $('#datetimepicker3').data('datetimepicker');
        $('#addLoop').click(function () {
            var date = picker.getLocalDate();
            var times1 = $('#times1').val();
            var duration1 = $('#duration1').val();//持续时间
            looptimes.push(times1 + '~' + duration1);
            console.log(date.toString() + '~~~~~~~~' + times1);
            if($('#timesGroup span').length>0){
                $('#timesGroup').empty();
            }
            $('#timesGroup').append('<button type="button" class="btn btn-default" id="alarms' + count + '"' +
                    ' style="margin: 8px 3px 0 0;" onclick="delalarm(' + count + ',' + loopcount + ')">' + times1 + ' [' + duration1 + '分钟]</button>');
            count++;
            loopcount++;
        });
        $('#addOnce').click(function () {
            var date = picker1.getLocalDate();
            var times2 = $('#times2').val();
            console.log(date.toString());
            var duration2 = $('#duration2').val();//持续时间
            oncetimes.push(times2 + '~' + duration2);
            if($('#timesGroup span').length>0){
                $('#timesGroup').empty();
            }
            $('#timesGroup').append('<button type="button" class="btn btn-default"  id="alarms' + count + '"' +
                    ' style="margin: 8px 3px 0 0;" onclick="delalarm1(' + count + ',' + oncecount + ')">' + times2 + ' [' + duration2 + '分钟]</button>');
            count++;
            oncecount++;
        });

        $('#submit').click(function () {
            var newTimeArr = looptimes.concat(oncetimes).join(',');
            var probability = $('#probability').val();
            var probability1 = $('#probability1').val();
            $.post('/box/probality/set', {
                boxid: boxid,
                newTimeArr: newTimeArr,
                probability: probability,
                probability1: probability1
            }, function (result) {
                //alert(result.msg);
//        history.go(-1);
                if (result.isadmin) {//需要改不安全
                    window.location.href = "/box/list?num=1";
                } else {
                    window.location.href = "/user_system/buyer_box?num=1&&account=" + result.account;
                }

            });
        });
    });
    function delalarm(count, loopcount) {
        $('#alarms' + count).remove();
        looptimes.splice(loopcount, 1);
        if($('#timesGroup').children().length==0){
            $('#timesGroup').html("<span>请通过添加按钮添加...</span>");
        }
    }
    function delalarm1(count, oncecount) {
        $('#alarms' + count).remove();
        oncetimes.splice(oncecount, 1)
        if($('#timesGroup').children().length==0){
            $('#timesGroup').html("<span>请通过添加按钮添加...</span>");
        }
    }

</script>